<template>
  <div class="service_guarantee">
    <!-- <img
			src="../../assets/images/goodsDetails/叉@2x.png"
			alt=""
			@click="completePrefer"
    />-->
    <p class="title">优惠</p>
    <div class="divider"></div>
    <!-- <div class="service_info" v-if="Number(good.discount) != 10">
          <span>折扣</span>
          <p class="content_text_info">商品已享受{{ good.discount }}折优惠</p>
    </div>-->
    <div class="service_info" v-if="this.cut != ''">
      <span v-if="this.cut != ''">购满减</span>
      <div class="infos">
        <p v-for="(cuts, index1) in this.cut" :key="index1">
          <i v-if="cuts.discount_type == 1">
            满{{ cuts.condition_num
            }}{{ cuts.condition_type == 1 ? "元" : "件" }}减{{
            cuts.discount_value
            }}元
          </i>
        </p>
      </div>
    </div>

    <div class="service_info" v-if="this.sent != ''">
      <span v-if="this.sent != ''">购满送</span>
      <div class="infos">
        <p v-for="(sents, index5) in this.sent" :key="index5">
          <i v-if="sents.discount_type == 2">
            满{{ sents.condition_num
            }}{{
            sents.condition_type == 1 ? "元" : "件"
            }}送{{ sents.discount_value }}件
          </i>
        </p>
      </div>
    </div>
    <div class="service_info" v-if="this.arr != ''">
      <span v-if="this.arr != ''">购满折</span>
      <div class="infos">
        <p v-for="(arrs, index4) in this.arr" :key="index4">
          <i v-if="arrs.discount_type == 3">
            满{{ arrs.condition_num
            }}{{ arrs.condition_type == 1 ? "元" : "件"
            }}{{ arrs.discount_value }}折
          </i>
        </p>
      </div>
    </div>
    <div class="service_info">
      <span>密马币</span>
      <p>购买赠送密马币</p>
    </div>
    <div class="bottom" @click="completePrefer">完成</div>
  </div>
</template>

<script>
export default {
  props: {
    prefers: Array,
    good: Object
  },
  data() {
    return {
      cut: [],
      sent: [],
      arr: []
    };
  },
  created() {
    this.prefers.forEach(i => {
      if (i.discount_type == 1) {
        this.cut.push(i);
      } else if (i.discount_type == 2) {
        this.sent.push(i);
      } else {
        this.arr.push(i);
      }
    });
  },
  methods: {
    completePrefer() {
      this.$emit("completeprefer", false);
    }
  }
  // watch:{
  //   prefers:{

  //   }
  // }
};
</script>

<style lang="scss" scoped>
.service_guarantee {
  img {
    height: 12px;
    width: 12px;
    position: absolute;
    top: 23px;
    right: 16px;
  }
  .title {
    line-height: 53px;
    font-size: 15px;
    font-weight: bold;
    color: rgba(60, 60, 60, 1);
    margin-left: 17px;
  }
  .divider {
    height: 0.5px;
    width: 355px;
    background: rgba(245, 245, 245, 1);
    margin: 0 auto;
  }
  .service_info {
    padding: 27px 31px 0 17px;
    display: flex;
    .infos {
      width: 280px;
      line-height: 16px;
      display: flex;
      flex-direction: column;
    }
    i {
      display: block;
      font-style: normal;
    }
    span {
      height: 16px;
      padding: 0 4px;
      display: block;
      // border: 1px solid rgba(242, 95, 95, 0.5);
      border-radius: 7px;
      font-size: 10px;
      background: rgba(253,247,243,1);
      font-weight: 400;
      color: #FF4F11;
      line-height: 16px;
    }
    p {
      display: inline-block;
      font-size: 13px;
      font-weight: 400;
      color: rgba(47, 47, 47, 1);
      margin-left: 16px;
      padding-bottom: 10px;

      letter-spacing:1px;
      // width: 270px;
      // white-space: nowrap;
    }
  }
  .bottom {
    width: 350px;
    text-align: center;
    position: absolute;
    bottom: 17px;
    margin: 0 11px;
    height: 46px;
    background: #ffdd07;
    border-radius: 30px;
    color: rgba(47, 47, 47, 1);
    font-size: 14px;
    font-weight: bold;
    margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
    line-height: 46px;
  }
}
</style>
